<template>
  <h2>测试四：watch，关注值变化</h2>
  avg当前值：{{ avg }}
  <button @click="avg--">减1</button>
  sum当前值：{{ sum }}
  <button @click="sum++">加1</button>
</template>

<script>
import {ref,watch} from "vue";
export default {
  name: "MyWatch1",
  // Vue2的写法
  // watch:{
  //   // sum(newvalue,oldvalue){
  //   //   console.log(`旧值：${oldvalue},新值：${newvalue}`)
  //   // }
  //   // 完整写法
  //   sum:{
  //     //立即监听
  //     immediate:true,
  //     //深度监视
  //     // deep:true,
  //     handler(newvalue,oldvalue){
  //       console.log(`旧值：${oldvalue},新值：${newvalue}`)
  //     }
  //   }
  // },
  setup(){
    let sum=ref(0);
    let avg=ref(5)
    // vue3写法，监听一个ref值
    // watch(sum,(newvalue,oldvalue)=>{
    //   console.log(`旧值：${oldvalue},新值：${newvalue}`)
    // })
    // 监听多个值 ，可以使用数组
    watch([sum,avg],(newvalue,oldvalue)=>{
      // 当监听多个变量的时候，值也是以数组方式传递。
      console.log(`旧值：${oldvalue},新值：${newvalue}`)
    },//第三个参数是配置值
        {immediate:true}//改变前先执行一次
    )

    return{
      sum,avg
    }
  }
}
</script>